<template>
  <div>
    <div class="header">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      <div class="header_box">
        <div class="avatar">
          <img :src="userlist ? avatar + userlist.avatar : oldavatar" alt="" />
        </div>
        <div class="herder_box_txt">
          <p>{{ userlist?userlist.nickname:'游客' }}</p>
          <van-button size="small" @click="toRouter" type="primary">{{ userlist ? '退出登录' : '去登陆' }}</van-button>
        </div>
      </div>
    </div>
    <van-grid :column-num="3" :border="false">
      <van-grid-item to="/myfavorite" icon="star-o" text="我的收藏" />
      <van-grid-item to="/myrental" icon="wap-home-o" text="我的出租" />
      <van-grid-item to="/checkingrecord" icon="clock-o" text="看房记录" />
      <van-grid-item to="/behomeowner" icon="debit-pay" text="成为房主" />
      <van-grid-item to="/personaldata" icon="manager-o" text="个人资料" />
      <van-grid-item to="/behomeowner" icon="service-o" text="联系我们" />
    </van-grid>
    <div class="bottomimg">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>
import { removeToken } from '@/utils/token'
import { getUser, removeUser } from '@/api/user'
export default {
  name: 'MyCenter',
  data () {
    return {
      userlist: {},
      avatar: 'http://liufusong.top:8080',
      oldavatar: 'http://liufusong.top:8080/img/profile/avatar.png'
    }
  },
  // 获取用户信息
  async created () {
    const { body } = await getUser()
    this.userlist = body
  },
  methods: {
    async toRouter () {
      // 判断当前页面是否含有用户信息，如果有就点击为退出，没有就去登录
      if (this.userlist) {
        const res = await removeUser()
        // 退出清除token
        removeToken()
        // 提示退出成功
        this.$toast.success(res.description)
        // 重新赋值影响页面
        this.userlist = null
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .header {
    position: relative;
    height: 300px;
    width: 100%;
    img {
      width: 100%;
    }
    .header_box {
      position: absolute;
      width: 85%;
      height: 55%;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      box-shadow: 0px 0px 10px 2px #ddd;
      .avatar {
        position: absolute;
        left: 50%;
        width: 70px;
        height: 70px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 5px solid #eee;
        img {
          width: 100%;
        }
      }
      .herder_box_txt {
        position: relative;
        text-align: center;
        padding-top: 30px;
        font-size: 13px;
        p{
          margin: 30px 0 14px;
        }
        ::v-deep .van-button--small {
          width: 70px;
          border-radius: 10px;
        }
      }
    }
  }
  .van-grid {
    margin-top: 10px;
  }
  .bottomimg{
    width: 100%;
    height: 87px;
    margin-top: 10px;
    text-align: center;
    img{
      width: 92%;
      height: 100%;
    }
  }
</style>
